<template>
    <div class="master-icons">
         <div @click="$emit('leftClick')">
            <div class="bottom-title" v-if="busShowBottom.userName" >@{{busShowBottom.userName}}</div>
            <span class="bottom-content"  v-if="busShowBottom.mediaComment">
                 {{busShowBottom.mediaComment}}
            </span>
         </div>
    </div>
</template>

<script>
    export default {
        name: "Bottom",
        props:{
            busShowBottomProp:Object,
        },
        data(){
            return{
                busShowBottom:{
                    userName:'',
                    mediaComment:'',
                }
            }
        },
        mounted() {
            this.busShowBottom = Object.assign({},this.busShowBottom,this.busShowBottomProp);
        },
        watch:{
            busShowBottomProp(val){
                this.busShowBottom = Object.assign({},this.busShowBottom,val);
            }
        }
    }
</script>

<style scoped lang="scss">
    .master-icons {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 1050;
        padding: .15rem;
    }
    .bottom-title{
        color: #fff;
        font-size: .16rem;
        font-weight: bold;
        padding-bottom: .05rem;
    }
    .bottom-content{
        color: #fff;
        font-size: .14rem;
    }
</style>